import React from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { Table, Modal, Button, Popconfirm } from 'antd'
import classnames from 'classnames'
import { Link } from 'react-router-dom'
import queryString from 'query-string'
import styles from './List.less'

const { confirm } = Modal

const List = ({ onDeleteItem, onEditItem, onResetItem, location, ...tableProps }) => {
  location.query = queryString.parse(location.search)

  const columns = [
    {
      title: '工号',
      dataIndex: 'id',
      key: 'id',
      width: 150,
      render: text => <Link to={`user/${text}`}>{text}</Link>,
    },
    // {
    //   title: '头像',
    //   dataIndex: 'portrait',
    //   key: 'portrait',
    //   width: 64,
    //   className: styles.avatar,
    //   render: (text, record) => {
    //     if (text) {
    //       return <img alt="头像" width={24} src={text} />
    //     }
    //     if (record.gender === '1') {
    //       return <img alt="头像" width={24} src="/portrait-girl.png" />
    //     }
    //     return <img alt="头像" width={24} src="/portrait-boy.png" />
    //   },
    // },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      render: text => (text === '0' ? '男' : '女'),
    }, {
      title: '联系方式',
      dataIndex: 'phone',
      key: 'phone',
    }, {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    }, {
      title: '组织',
      dataIndex: 'organizationName',
      key: 'organizationName',
    }, {
      title: '更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime',
      render: text => moment(text).format('YYYY-MM-DD HH:mm:ss'),
    }, {
      title: '操作',
      key: 'operation',
      width: 300,
      fixed: 'right',
      render: (text, record) => {
        return (<div>
          <Button type="default" onClick={() => onEditItem(record)} style={{ marginRight: '15px' }} >编辑</Button>
          <Button type="primary" onClick={() => onResetItem(record)} style={{ marginRight: '15px' }} >重置密码</Button>
          <Popconfirm title="确认删除此记录？" onConfirm={() => onDeleteItem(record)} okText="确认" cancelText="取消">
            <Button type="danger">删除</Button>
          </Popconfirm>
        </div>)
      },
    },
  ]

  return (
    <div>
      <Table
        {...tableProps}
        className={classnames({ [styles.table]: true })}
        bordered
        scroll={{ x: 1250 }}
        columns={columns}
        simple
        rowKey={record => record.id}
      />
    </div>
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onResetItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
